<template>
  <div class="fixed right-1.5vh bottom-12vh z-100 text-16px flex flex-col text-white dark:text-#D8D8D8 select-none">
    <!-- 锁屏弹框密码 -->
    <KoiDialog ref="koiDialogRef" :title="title" :width="360" :height="230" @koiConfirm="handleConfirm" @koiCancel="handleCancel" :loading="confirmLoading">
      <template #content>
        <div class="flex flex-col flex-items-center m-t-26px">
          <!-- 作者头像 -->
          <div class="border-1px border-dashed border-[--el-color-primary] w-68px h-68px p-4px rounded-full m-b-15px flex flex-items-center flex-justify-center">
            <el-image :src="avatarUrl" fit="cover" class="user-avatar w-58px h-58px hover:opacity-70 rounded-full">
              <el-icon class="text-[--el-color-primary]" :size="58">
                <CircleCloseFilled />
              </el-icon>
            </el-image>
          </div>
          <div class="capitalize text-#333 dark:text-#D8D8D8 text-14px m-b-30px font-700 tracking-1px">
            『于心博客』
          </div>
        </div>
        <el-form ref="formRef" :rules="rules" :model="form" label-width="auto" status-icon>
          <el-row>
            <el-col :sm="{ span: 24 }" :xs="{ span: 24 }" class="p-x-26px">
              <el-form-item prop="lockPassword">
                <el-input type="password" v-model="form.lockPassword" placeholder="请输入锁屏密码" show-password clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </KoiDialog>
    <!-- 锁屏组件 -->
    <KoiLockScreen
      v-model:open="globalStore.lockScreen"
      :lockPassword="form.lockPassword"
      @unlock="handleUnlock"
    >
    </KoiLockScreen>
    <div v-if="toolButton" :class="{ 'animate__animated animate__fadeInRight': toolButton }">
      <!-- 锁屏 -->
      <LockScreen @click="handleLockScreen"></LockScreen>
      <!-- 主题 -->
      <ThemeSetting></ThemeSetting>
      <!-- 全屏 -->
      <FullScreen></FullScreen>
    </div>

    <!-- 设置 -->
    <el-tooltip placement="left" content="设置">
      <div
        class="m-t-6px bg-[--el-color-primary-light-2] rounded-8px border-2px border-solid border-[--el-color-primary] text-center w-40px h-40px flex flex-justify-center flex-items-center"
        @click="handleToolButton"
      >
        <el-icon class="rotate-box" :size="20"><Tools /></el-icon>
      </div>
    </el-tooltip>
    <!-- 通知 -->
    <Notice></Notice>
    <!-- 百分比 -->
    <el-tooltip placement="left" content="进度条">
      <div
        class="m-t-6px bg-[--el-color-primary-light-2] rounded-8px border-2px border-solid border-[--el-color-primary] text-center leading-36px w-40px h-40px overflow-hidden"
      >
        {{ scrollStore.scrollPercentage + "%" }}
      </div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { koiMsgSuccess, koiMsgError } from "@/utils/koi.ts";
import { useScrollPercentage } from "@/utils/scroll.ts";
useScrollPercentage();
import useScrollStore from "@/stores/modules/scroll.ts";
import Notice from "../Float/components/Notice.vue";
import FullScreen from "../Float/components/FullScreen.vue";
import ThemeSetting from "../Float/components/ThemeSetting.vue";
import LockScreen from "../Float/components/LockScreen.vue";
import KoiLockScreen from "@/components/KoiLockScreen/Index.vue";
import useGlobalStore from "@/stores/modules/global.ts";

const globalStore = useGlobalStore();

/** 锁屏 */
const handleLockScreen = () => {
  handleKoiDialog();
};

const handleUnlock = () => {
  koiMsgSuccess("解锁成功!");
};

// 获取百分比滚动
const scrollStore = useScrollStore();

const toolButton = ref(false);

const handleToolButton = () => {
  toolButton.value = !toolButton.value;
};

const avatarUrl = "https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp";

/** 打开锁屏Dialog */
const handleKoiDialog = () => {
  // 重置表单
  resetForm();
  // 标题
  title.value = "";
  koiDialogRef.value.koiOpen();
};

// 添加 AND 修改对话框
const koiDialogRef = ref();
// 标题
const title = ref();
// form表单Ref
const formRef = ref<any>();
// form表单
let form = ref<any>({
  lockPassword: ""
});

/** 清空表单数据 */
const resetForm = () => {
  form.value = {
    lockPassword: ""
  };
};

/** 表单规则 */
const rules = reactive({
  lockPassword: [{ required: true, message: "请输入锁屏密码", trigger: "blur" }],
});

// 确定按钮Loading
const confirmLoading = ref(false);

/** 确定  */
const handleConfirm = () => {
  if (!formRef.value) return;
  confirmLoading.value = true;
  (formRef.value as any).validate(async (valid: any) => {
    if (valid) {
      /** Loading加载 */
      let loadingTime = 1;
      setInterval(() => {
        loadingTime--;
        if (loadingTime === 0) {
          koiMsgSuccess("锁屏密码保存成功");
          confirmLoading.value = false;
          koiDialogRef.value.koiQuickClose();
          globalStore.setGlobalState("lockPassword", form.value.lockPassword);
          globalStore.setGlobalState("lockScreen",!globalStore.lockScreen);
        }
      }, 1000);
    } else {
      koiMsgError("验证失败，请检查填写内容");
      confirmLoading.value = false;
    }
  });
};

/** 取消 */
const handleCancel = () => {
  koiDialogRef.value.koiClose();
};
</script>

<style scoped></style>
